<template>
  <div class="count">
    <h2>当前求和为：{{ sum }},放大十倍后，{{ bigSum }}</h2>
    <h3>欢迎来到：{{ school }}--大写{{ uppSchool }},坐落于：{{ address }}</h3>
    <select v-model.number="nSum">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
    <hr />
    <div>
      <h2>我是父组件</h2>
      <h4>房产：{{ house }}</h4>
      <button @click="changeToy">修改child1的玩具</button>
      <button @click="changeCom">修改child2的电脑</button>
      <button @click="changeAll($refs)">让所有孩子数据增加</button>
    </div>
    <child1 ref="c1" />
    <child2 ref="c2" />
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
import child1 from "./child1.vue";
import child2 from "./child2.vue";
const countStore = useCountStore();
// console.log("@@@@==",countStore);
console.log("@@@@countStore==", countStore.sum);
//storeToRefs只会关注store中的数据，不会对方法进行ref包裹
const { sum, school, address, bigSum, uppSchool } = storeToRefs(countStore);

let nSum = ref(1);
function add() {
  //第一种修改方式 - 修改了三次
  // countStore.sum  += 1;
  // countStore.school = "v3",
  // countStore.address = '安徽-合肥'

  // 第二种修改方式 - 批量的变更 - 修改了一次
  // countStore.$patch({
  //     sum:123,
  //     school:"v33",
  //     address:"合肥-庐阳"
  // })

  //第三种修改方式
  countStore.increment(nSum.value, "v3", "安徽-合肥");
}
function minus() {}

let house = ref(4);
let c1 = ref();
let c2 = ref();
function changeToy() {
  c1.value.toy = "机器人";
}
function changeCom() {
  c2.value.computer = "华硕";
}
// function changeAll(refs:any) {
//或者
function changeAll(refs:{[key:string]:any}) {
  // console.log("ref==",ref);
  for (const key in refs) {
    // console.log("ref[key]==",refs[key]);
    refs[key].book +=3
  }
}
//将数据交出去
defineExpose({house})
</script>
<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select,
button {
  margin: 0 5px;
  height: 25px;
}
</style>